import React from 'react';
import {View, ScrollView, Image, Text, TouchableOpacity, Dimensions} from 'react-native';
import NavigationBar from '../../component/NavigationBar'
import CustomTrendingPage from "./CustomTrendingPage";

const SCREEN_WIDTH = Dimensions.get('window').width;

export default class MyPage extends React.Component {
    render() {
        return <View>
            <NavigationBar title='我的'/>
            <ScrollView>
                <View>
                    <MyPageItemTitle name='Custom trending language'/>
                    <MyPageItem name='Custom Language' image={require('../../../res/images/ic_computer.png')}
                                onPress={() => this.props.navigation.navigate('CustomTrendingPage')} showLine={true}/>
                    <MyPageItem name='Sort Language' image={require('../../../res/images/ic_feedback.png')}/>
                    <MyPageItemTitle name='Custom popular key'/>
                    <MyPageItem name='Custom Key' image={require('../../../res/images/ic_computer.png')}
                                showLine={true}/>
                    <MyPageItem name='Sort Key' image={require('../../../res/images/ic_feedback.png')} showLine={true}/>
                    <MyPageItem name='Remove Key' image={require('../../../res/images/ic_computer.png')}/>
                    <MyPageItemTitle name='Setting'/>
                    <MyPageItem name='Custom Theme' image={require('../../../res/images/ic_computer.png')}
                                showLine={true}/>
                    <MyPageItem name='Night Mode' image={require('../../../res/images/ic_feedback.png')}
                                showLine={true}/>
                    <MyPageItem name='About Author' image={require('../../../res/images/ic_computer.png')}/>
                </View>
            </ScrollView>
        </View>
    }


}

class MyPageItemTitle extends React.Component {
    propTypes: {
        name: PropTypes.string,
    };

    render() {
        let name = this.props.name;
        return <View style={{flexDirection: 'row', height: 30, alignItems: 'center', backgroundColor: 'eee'}}>
            <Text style={{marginLeft: 10, fontSize: 13}}>{name}</Text>
        </View>

    }
}

class MyPageItem extends React.Component {
    propTypes: {
        name: PropTypes.string,
        image: PropTypes.any,
        onPress: PropTypes.func,
        showLine: PropTypes.bool
    };

    render() {
        let name = this.props.name;
        let image = this.props.image;
        return <TouchableOpacity onPress={this.props.onPress} activeOpacity={0.5}>

            <View style={{flexDirection: 'row', height: 50, alignItems: 'center', backgroundColor: '#fff'}}>
                <Image source={image} style={{marginLeft: 20, height: 20, width: 20}}/>
                <Text style={{fontSize: 14, marginLeft: 5}}>{name}</Text>
                <View style={{justifyContent: 'center', alignItems: 'flex-end', flex: 1}}>
                    <Image source={require('../../../res/images/ic_tiaozhuan.png')}
                           style={{tintColor: 'steelblue', marginRight: 10}}/>
                </View>
                {this.line()}
            </View>
        </TouchableOpacity>

    }

    line() {
        if (this.props.showLine) {
            return <View
                style={{width: SCREEN_WIDTH, height: 0.5, backgroundColor: '#ddd', position: 'absolute', bottom: 0}}/>
        }
    }
}

class Line extends React.Component {
    render() {
        return <View style={{height: 0.5, backgroundColor: '#ddd'}}/>
    }
}